<template>
	<!-- 奖励记录 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view> 
		<!-- #endif -->
		<navbar title="奖励记录" />
		<view class="title">
			<text>达成成就</text>
			<text>达成时间</text>
			<text>获得奖励</text>
		</view>
		<noData v-if="boxrecordList.length === 0" />
		<view class="record" v-else>
			<view class="record_item" v-for="(item,index) in boxrecordList" :key="index">
				<view class="record_item_title">开盒{{item.box_num}}次</view>
				<view class="record_item_time">{{item.create_time}}</view>
				<view class="record_item_reward">+{{item.price}}</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" v-if="boxrecordList.length > 9" />
	</view>
</template>

<script>
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			pullDownRefresh
		},
		data() {
			return {
				page:1,
				boxrecordList:[],
				loading:0
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getBoxrecord();
		},
		onReachBottom() {
			this.page++;
			this.getBoxrecord();
		},
		methods: {
			//获取成就开盒记录
			getBoxrecord(){
				this.loading = 1;
				this.$api.boxrecord({
					offset:this.page
				}).then(res=>{
					uni.hideLoading();
					if(res.length>0){
						this.loading = 0;
						this.boxrecordList = this.boxrecordList.concat(res);
					}else{
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	padding-top: calc(var(--status-bar-height) + 205rpx);
}
.title{
	width: 750rpx;
	height: 105rpx;
	background: #FFFFFF;
	border-top: 1rpx solid #EEEEEE;
	border-bottom: 1rpx solid #EEEEEE;
	box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
	padding: 32rpx 48rpx;
	font-size: 28rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #3A3A3A;
	@include between;
	position: fixed;
	top: calc(var(--status-bar-height) + 100rpx);
	z-index: 999;
}
.record{
	
	&_item{
		background: #FFFFFF;
		padding: 34rpx 48rpx;
		@include between;
		border: 1rpx solid #EEEEEE;
		
		&_title{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		&_time{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		&_reward{
			font-size: 32rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #FF3B30;
		}
	}
}
</style>
